Add keyboard options to blocks #3400
Conversation
|
This PR has the following issues.
|
|
This PR is far from complete. But I have added for review as I would like some thoughts on this. The biggest issue, is not moving a block left and right when editing text. I have a very dirty work around for this, but I want something a little more full proof way of knowing a user is editing. This is hard to do, when it is a mixture of core and amp story blocks. I was thinking of having a |
| return; | ||
| } | ||
|
|
||
| if ( classList.contains( 'editor-rich-text__editable' ) && classList.contains( 'is-selected' ) ) { |
There was a problem hiding this comment.
Isn't there a isSelected prop?
There was a problem hiding this comment.
Not that I can see
attributes: {ordered: false, values: "", addedAttributes: 0, opacity: 100, positionTop: 30, …}
clientId: "b1540913-690e-4e23-8a0a-8f531c77301e"
innerBlocks: []
isValid: true
name: "core/list"
There was a problem hiding this comment.
Odd 🤔
I thought it does:
| left = -1; | ||
| break; | ||
| case DELETE: | ||
| removeBlock( selectedBlock.clientId ); |
There was a problem hiding this comment.
What about the existing keyboard shortcut for removing blocks?
When I'm typing in a text block, I wouldn't expect arrow keys to move the block 🤔 |
Yes, that is what I am saying. When in text block is selected and the cursor is blinking in an editable field, left and right arrows, should move the cursor and not the block. |
Hmm, maybe that's something we might possibly want to do anyway -- to implement edit vs drag-mode for all the text blocks (which would require extending all the core blocks anyway)? Currently, only the CTA block and Text block have the feature of being able to drag from anywhere while not editing and being able to edit after two clicks (and losing the dragging ability). Wondering if the core blocks allowing text (quote, list, etc.) might require the same. Also, I wonder if instead of Thoughts? |
|
That reminds me of #2788 and WordPress/gutenberg#17088. |
|
I just noticed that the |
|
A good example of Keyboard shortcuts usable for something similar in the gutenberg can be found here. |
|
I have updated the PR to use the |
| } ); | ||
|
|
||
| /** | ||
| * Higher-order component that adds right click handler to each inner block. |
There was a problem hiding this comment.
| * Higher-order component that adds right click handler to each inner block. | |
| * Higher-order component that adds a keyboard navigation handler to each inner block. |
| */ | ||
| export default createHigherOrderComponent( | ||
| ( BlockEdit ) => { | ||
| return applyWithDispatch( ( props ) => { |
|
|
||
| let top = 0; | ||
| let left = 0; | ||
| switch ( keyCode ) { |
There was a problem hiding this comment.
Needs some testing, but it would be nice if one could move in bigger steps when holding down an additional key, e.g. ctrl, alt, or cmd. If I am not mistaken this kind of behavior is common in other applications when moving elements with the keyboard
Add options to blocks to move and delete blocks.
Fixes #3280 #3325